<template>
    <div class="Community_Card">
        <!-- Pc端适配 -->
        <div id="Community-pc">
            <div class="title">
                <Tag1 content="置顶" theme="blue" margin-top="10px" v-show="message.top!=0"></Tag1>
                <Tag1 content="精华" theme="red"  margin-top="10px" v-show="message.elite"></Tag1>
                <router-link
                class="big-title"
                ref="title" 
                :to="{path:'/Community/Article',query:{address:message.id}}"
                tag="span">{{message.title}}
                </router-link>
            </div>
             <Tag2 v-for="(item, index) in message.tags" :key="index" :content="item"></Tag2>       
            <div class="content">{{message.content}}</div>
            <div class="information">
                <span class="service">
                    <router-link
                    class="cursor" 
                    :to="{path:'/Attention',query:{idcard:message.authorId}}"
                    tag="span">
                    {{message.author}}
                    </router-link>
                     发布了主题 · {{message.fuzzyTime}}
                </span>
                <span class="symbol">
                    ⊙{{message.view}}
                </span>
                <span class="symbol">
                    ☏{{message.review}}
                </span>
                <span class="symbol">
                    👍{{message.like}}
                </span>
            </div>
        </div>
        <!-- 移动端端适配 -->
        <div id="Community-mobile">
            <div class="title">
               <Tag1 content="置顶" theme="blue" v-show="message.top"></Tag1>
                <Tag1 content="精华" theme="red" v-show="message.elite"></Tag1>
                <router-link
                class="big-title"
                ref="title" 
                :to="{path:'/Community/Article',query:{address:message.id}}"
                tag="span">{{message.title}}
                </router-link>
            </div>
            <div class="btn">
                <Tag2 v-for="(item, index) in message.tags" :key="index" :content="item"></Tag2>
            </div>
            <div class="content">
                {{message.content}}
            </div>
            <div class="information">
                 <span class="service">
                    <router-link
                    class="cursor" 
                    :to="{path:'/Attention',query:{idcard:message.authorId}}"
                    tag="span">
                    {{message.author}}
                    </router-link>
                     发布了主题 · {{message.fuzzyTime}}
                </span>
                <span class="symbol">
                    ⊙{{message.view}}
                </span>
                <span class="symbol">
                    ☏{{message.review}}
                </span>
                <span class="symbol">
                    👍{{message.like}}
                </span>

            </div>
        </div>
    </div>
</template>
<script>
import Tag2 from '@/components/tags/Tag2.vue'
import Tag1 from '@/components/tags/Tag1.vue'
export default {
    name: 'Community_Card',
    props: ['message'],
    data(){
        return {
        }
    },
    components:{
        Tag1,
        Tag2,
    }
}
</script>
<style scoped>
.cursor{
    cursor: pointer;
}
@media screen and (min-width: 981px){
    #Community-mobile{
        display:none;
    }
    #Community-pc{
        width:100%;
        height:200px;
        border-bottom: 1px solid #e6e6e6;
    }
    .title{
        width:100%;
        height:70px;
    }
    .title .big-title{
        font-size: 21px;
        font-weight: bold;
        line-height: 60px;
        margin-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .title .font_bk3{
        padding-top:10px;
        color:#FFD700;
        font-size: 14px;
        line-height: 20px;
    }
    .title .font_bk4{
        padding-top:10px;
        font-size: 15px;
        line-height: 20px;
    }
    .title .num{
        font-size: 14px;
        line-height: 60px;
        color: #9a9a9a;
    }
    .content{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #454545;
        font-size:14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
    }
    .information{
        margin-top: 5px; 
        width:100%;
        height: 45px;
        color: #9a9a9a;
    }
    .information .service{
        font-size: 14px;
        margin-right: 250px;
    }
    .information .symbol {
        font-size: 14px;
        margin-right: 20px;
    }
}
@media screen and (max-width: 980px){
#Community-mobile{
    width:100%;
    height:280px;
    padding: 0px 3% 35px 3%;
    border-bottom: 1px solid #e6e6e6;
}
#Community-pc{
    display:none;
}
.title{
    width:100%;
    height:auto;
    display: inline-block;
}
.title .font_bk1{
    background:rgb(204, 91, 91);
    border: 1px solid red;
    font-size: 15px;
    line-height:30px;
    margin-right:5px; 
    color: white;
}
.title .font_bk2{
    border: 1px solid blue;
    font-size: 15px;
    line-height: 30px;
    margin-right:10px;
    background: rgb(100, 100, 190);
    color: white;
}
.title .big-title{
    max-width: 100%;
    font-size: 20px;
    height: 90px;
    line-height: 30px;
    margin-right: 10px;
    padding-top: 10px;
    color: rgb(100, 100, 190);
    display: inline-block;
    
}
.title .big-title:hover{
    color:blue;
}
.title .font_bk3{
    color:#FFD700;
    font-size: 25px;
    line-height: 40px;
}
.title .font_bk4{
    font-size: 15px;
    line-height: 40px;
}
.title .num{
    font-size: 18px;
    line-height: 30px;
}
.btn{
    width:100%;
    height:30px; 
}
.btn .btn1{
    font-size:10px;
    border-radius: 20px;
}
.btn .btn1:hover{
    background-color: #B0C4DE;
}
.content{
    width: 100%;
    margin-top:10px;
    height: auto;
    color: #303030;
    font-size:17px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
}
.information{
    width:100%;
    height: 40px;
    padding-top:10px;
}
.information .service{
    font-size: 17px;
    line-height: 30px;
    margin-right: 25px;
}
.information .symbol {
    font-size: 17px;
    line-height: 30px;
    margin-right: 10px;
}
}
</style>
